<template>
  <div class="content">
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>到家首页配置</el-breadcrumb-item>
        <el-breadcrumb-item>到家首页配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">到家首页配置</div>
      <div class="orderList">
        <div class="left">
          <!-- 顶部 -->
          <div class="top">
            <span>9:41</span>
            <div>
              <img src="./xinhao.png" style="width:25px;height:25px;" />
              <img src="./icon_huabanfuben.png" style="width:25px;height:25px;" />
              <img src="./iconset0252.png" style="width:25px;height:25px;" />
            </div>
          </div>
          <div class="cound">
            <div style="margin-top:8px;margin-bottom:8px;">
              <i class="el-icon-location-outline"></i>
              <span>复地中环12号楼</span>
            </div>
          </div>
          <!-- 轮播图 -->
          <div class="cound">
            <div class="block" v-for="(item, index) in list" :key="index">
              <p v-if="item.materialList.length === 0" style="text-align: center;">
                暂无图片
              </p>
              <el-carousel height="150px" style="margin-bottom:10px;">
                <el-carousel-item v-for="(item, index2) in item.materialList" :key="index2">
                  <img class="small" :src="item.materialContent" style="width:100%;height:100%;" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <!-- 金刚区 -->
          <div class="cound">
            <div class="Kingkongarea" v-for="(item, index) in list1" :key="index">
              <p style="margin-bottom:5px;">{{ item.positionName }}</p>
              <p v-if="materialList.length === 0" style="text-align: center;">
                暂无数据
              </p>
              <div class="imgs">
                <div class="imgsleft" v-for="(item, index1) in materialList" :key="index1">
                  <img :src="item.materialIcon" alt="" />
                  <p>{{ item.materialName }}</p>
                  <p>{{ item.materialSubName }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 仅你专享 -->
          <div class="cound">
            <div class="released" v-for="(item, index) in list3" :key="index">
              <p>{{ item.positionName }}</p>
              <p>{{ item.positionSubName }}</p>
              <p v-if="item.materialList.length === 0" style="text-align: center;margin-top: 8px;">
                暂无数据
              </p>
              <div class="releasedleft">
                <div class="releasedleaf" v-for="(item, index1) in item.materialList" :key="index1">
                  <img class="small" :src="item.vipMaterialPic" style="width:100%;height:65px;" />
                  <p>{{ item.vipMaterialName }}</p>
                  <p>{{ item.vipMaterialSubName }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 随心选 -->
          <div class="cound">
            <div class="released" v-for="(item, index) in list2" :key="index">
              <p>{{ item.positionName }}</p>
              <p>{{ item.positionSubName }}</p>
              <p v-if="item.materialList.length === 0" style="text-align: center;margin-top: 8px;">
                暂无数据
              </p>
              <div class="releasedleft">
                <div class="releasedleaf" v-for="(item, index1) in item.materialList" :key="index1">
                  <img class="small" :src="item.chooseMaterialPic" style="width:100%;height:65px;" />
                  <p>{{ item.chooseMaterialName }}</p>
                  <p>{{ item.chooseMaterialUnit }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 底部 -->
          <div class="footer">
            <div class="one">
              <img src="./shouye.png" style="width:25px;height:25px;" />
              <span>首页</span>
            </div>
            <div class="one">
              <img src="./gouwu.png" style="width:25px;height:25px;" />
              <span>到家</span>
            </div>
            <div class="one">
              <img src="./yunguanjia.png" style="width:25px;height:25px;" />
              <span>管家</span>
            </div>
            <div class="one">
              <img src="./04.png" style="width:25px;height:25px;" />
              <span>我的</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="righttop">
            <span>楼层顺序调整</span>
            <el-button style="background-color:#fd804c;color: #fff;" size="small" @click="isRelease">发布</el-button>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="index" label="序号"> </el-table-column>
            <el-table-column fixed prop="sort" label="排序">
              <template slot-scope="scope">
                <el-button style="color: #fc9e76;" type="text" size="small" @click="moveUp(scope.row, scope.$index)" v-if="scope.row.sort != minNum" :disabled="scope.$index === 0">
                  <i class="el-icon-top"></i>
                </el-button>
                <!-- 这里分别展示了判断是否上移下移的两种方案 -->
                <el-button style="color: #fc9e76;" type="text" size="small" v-if="scope.row.sort != maxNum" @click="moveDown(scope.row, scope.$index)" :disabled="getFormLength(scope.$index)">
                  <i class="el-icon-bottom"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="positionName" label="楼层名称">
              <template slot-scope="scope">
                <div>
                  <el-input maxlength="4" show-word-limit v-model="scope.row.positionName" placeholder="请输入内容" @blur="isBlur(scope.row)"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="province" label="楼层状态">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.positionStatus" active-value="0" inactive-value="1" @change="isSwitch(scope.row)" active-color="#fb8053">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button style="color: #fc9e76;" type="text" size="small" @click="isConfig(scope.row)">详情</el-button>
                <el-button @click="isUpdate(scope.row)" style="color: #fc9e76;" type="text" size="small">复制</el-button>
                <el-button style="color: #fc9e76;" type="text" size="small" @click="isDel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 复制dialog -->
          <el-dialog title="复制的楼层" :visible.sync="dialogFormVisible" @closed="dialog">
            <el-form :model="form" ref="form">
              <el-form-item label="主标题" :label-width="formLabelWidth">
                <el-input v-model="form.positionName" autocomplete="off" maxlength="4" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="副标题" :label-width="formLabelWidth">
                <el-input v-model="form.positionSubName" autocomplete="off" maxlength="10" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="高亮标题" :label-width="formLabelWidth">
                <el-input v-model="form.highlightName" autocomplete="off" maxlength="10" show-word-limit></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button style="background-color:#fd804c;color: #fff;" @click="isSubmit">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      minNum: null,
      goods: "",
      text: "",
      input: "",
      formData: {},
      fieldData: [],
      tableData: [],
      list: [], //banner
      list1: [], //金刚区
      list2: [],
      list3: [],
      positionId: "",
      materialList: [],
      optionalConfigData: [],
      form: {
        positionName: "",
        highlightName: "",
        positionSubName: ""
      },
      arr: [
        {
          cnName: "第一"
        },
        {
          cnName: "第二"
        },
        {
          cnName: "第三"
        },
        {
          cnName: "第四"
        }
      ],
      formLabelWidth: "70px",
      dialogFormVisible: false
    };
  },
  activated () {
    this.DetailByPage();
    this.fetchAllPositionMaterialList();
  },
  methods: {
    //复制
    isSubmit () {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/copyPosition`,
        method: "post",
        data: {
          positionId: this.form.positionId,
          positionName: this.form.positionName || "",
          highlightName: this.form.highlightName || "",
          positionSubName: this.form.positionSubName || "",
          positionType: this.form.positionType
        }
      }).then(res => {
        if (res.success == 1) {
          this.$message.success("添加成功");
          this.DetailByPage();
          this.fetchAllPositionMaterialList();
        } else {
          this.$message.error(res.errorMsg);
        }
        (this.form = {
          positionName: "",
          positionSubName: "",
          highlightName: ""
        }),
          ((this.num = ""), (this.dialogFormVisible = false));
      })
    },
    isUpdate (data) {
      console.log("data,,,,,", data);
      this.dialogFormVisible = true;
      this.form = data;
    },
    dialog () {
      this.form.highlightName = ''
    },
    //删除
    isDel (e) {
      console.log(e.positionId);
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/deletePosition`,
        method: "get",
        params: {
          positionId: e.positionId
        }
      }).then(res => {
        console.log(res);
        if (res.success == 1) {
          this.$message.success("删除成功");
          this.DetailByPage();
          this.fetchAllPositionMaterialList();
        } else {
          this.$message.error(res.errorMsg);
        }
      });
    },
    //右边
    DetailByPage () {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/homeServiceIndexBackstageConfigList`,
        method: "GET",
        params: {
          pageCode: "homeServiceIndexV2",
          page: 1,
          size: 20
        }
      }).then(res => {
        this.tableData = res.list;
        console.log(res.list, "右边");
        const maxNum = Math.max.apply(
          Math,
          res.list.map(function (o) {
            return o.sort;
          })
        );
        const minNum = Math.min.apply(
          Math,
          res.list.map(function (o) {
            return o.sort;
          })
        );
        this.maxNum = Number(maxNum);
        this.minNum = Number(minNum);
      });
    },
    //左边
    fetchAllPositionMaterialList () {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/fetchAllPositionMaterialList`,
        method: "get"
      }).then(res => {
        console.log(res.data, "左边");
        this.fieldData = res.data;
        let banner = res.data.filter(e => e.positionType == "95");
        this.list = banner;
        let Kingkong = res.data.filter(e => e.positionType == "96");
        this.list1 = Kingkong;
        Kingkong.forEach(e => {
          this.materialList = e.materialList.splice(0, 4);
        });
        let choose = res.data.filter(e => e.positionType == "97");
        this.list2 = choose;
        let onlyyou = res.data.filter(e => e.positionType == "99");
        this.list3 = onlyyou;
      });
    },
    //跳转详情
    isConfig (e) {
      if (e.positionType == "96") {
        this.$router.push({
          path: "/vipConfig",
          query: {
            positionId: e.positionId
          }
        });
      } else if (e.positionType == "97") {
        this.$router.push({
          path: "/optionalConfig",
          query: {
            positionId: e.positionId
          }
        });
      } else if (e.positionType == "99") {
        this.$router.push({
          path: "/exclusive",
          query: {
            positionId: e.positionId
          }
        });
      } else if (e.positionType == "95") {
        this.$router.push({
          path: "/rotationConfig",
          query: {
            positionId: e.positionId
          }
        });
      }
    },
    //修改栏位状态
    isSwitch (data) {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/updateMaterialStatus`,
        method: "post",
        data: {
          positionId: data.positionId,
          positionStatus: data.positionStatus == true ? 1 : 0
        }
      })
        .then(res => {
          if (res.success == 1) {
            this.$message.success("修改成功");
            this.DetailByPage();
          } else {
            this.$message.error(res.errorMsg);
            this.DetailByPage();
          }
        })
        .catch(() => {
          this.$message.error("修改失败");
        });
    },
    //发布
    isRelease () {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/publishAllPosition`,
        method: "post",
        data: {}
      })
        .then(res => {
          if (res.success == 1) {
            this.$message.success("发布成功");
            this.DetailByPage();
          } else {
            this.$message.error(res.errorMsg);
          }
        })
        .catch(() => {
          this.$message.error("发布失败");
        });
    },
    //修改栏位名称
    isBlur (data) {
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/updatePositionName`,
        method: "post",
        data: {
          positionId: data.positionId,
          positionName: data.positionName
        }
      })
        .then(res => {
          if (res.success == 1) {
            this.$message.success("修改成功");
            this.DetailByPage();
            this.fetchAllPositionMaterialList();
          } else {
            this.$message.error(res.errorMsg);
          }
        })
        .catch(() => {
          this.$message.error("修改失败");
        });
    },
    // 上移
    moveUp (item, index) {
      //console.log("data.sort.,,moveUp,,", item.positionId, item.sort, index);
      //相邻上一个值
      let upData = this.tableData[index - 1];
      //当前选中值
      let currentData = item;
      var temp = upData.sort;
      upData.sort = currentData.sort;
      currentData.sort = temp;
      let AllData = [upData, currentData];
      const exchangeSortList = AllData.map(item => {
        return {
          positionId: item.positionId,
          positionSort: item.sort
        };
      });
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/exchangePositionSort`,
        method: "post",
        data: {
          exchangeSortList
        }
      })
        .then(res => {
          if (res.success == 1) {
            this.$message.success("上移成功");
            this.DetailByPage();
          } else {
            this.$message.error(res.errorMsg);
            this.DetailByPage();
          }
        })
        .catch(() => {
          this.$message.error(res.errorMsg);
          this.DetailByPage();
        });
    },
    // 下移
    moveDown (item, index) {
      //相邻下一个值
      let downDate = this.tableData[index + 1];
      //当前选中值
      let currentData = item;
      var temp = downDate.sort;
      downDate.sort = currentData.sort;
      currentData.sort = temp;
      let AllData = [downDate, currentData];
      const exchangeSortList = AllData.map(item => {
        return {
          positionId: item.positionId,
          positionSort: item.sort
        };
      });
      this.$http({
        url: `/cmsadmin/homeService/config/index/V2/exchangePositionSort`,
        method: "post",
        data: {
          exchangeSortList
        }
      })
        .then(res => {
          if (res.success == 1) {
            this.$message.success("下移成功");
            this.DetailByPage();
          } else {
            this.$message.error(res.errorMsg);
            this.DetailByPage();
          }
        })
        .catch(() => {
          this.$message.error(res.errorMsg);
          this.DetailByPage();
        });
    },
    // 控制下移按钮的显示于隐藏
    getFormLength (index) {
      if (index === this.tableData.length - 1) return true;
      else return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.orderList {
  background-color: #ebeef1;
  padding: 10px;
  display: flex;
  border-radius: 20px;
  .left {
    width: 100%;
    flex: 1;
    background-color: #e6e6e6;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background-color: #fff;
    }
  }
  .cound {
    padding-left: 10px;
    padding-right: 10px;
  }
  .right {
    flex: 2;
    background-color: #fff;
    padding: 10px;
  }
}
.Kingkongarea {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  .imgs {
    display: flex;
    width: 100%;
    justify-content: space-around;
    .imgsleft {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        width: 65px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
  img {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(192, 192, 192);
    margin-bottom: 5px;
  }
}
.released {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  .releasedleft {
    width: 100%;
    overflow: hidden;
    clear: both;
    margin-top: 10px;
    .releasedleaf {
      margin-right: 5px;
      margin-bottom: 5px;
      float: left;
      width: 48%;
    }
  }
}
.footer {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  // margin-top: 10px;
  // position: fixed;
  .one {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.righttop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  .two {
    margin-left: 20px;
  }
  .three {
    margin-left: 80px;
  }
  .four {
    margin-left: 130px;
  }
  .last {
    margin-left: 120px;
  }
}
/deep/ .el-carousel__indicator .el-carousel__indicator--horizontal {
  .el-carousel__button {
    opacity: 0.48;
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
.buttons {
  display: flex;
  align-items: center;
  .el-icon-bottom {
    margin-left: 50px;
  }
  .el-icon-top {
    margin-left: 50px;
  }
  .el-input--small {
    margin-left: 50px;
    .el-input__inner {
      padding: 0 10px;
    }
  }
  .el-switch {
    margin-left: 40px;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
/deep/ .el-carousel__indicator--horizontal {
  display: none;
}
</style>
